<template>
  <div class="material-management management-page">
    <!-- 搜索和筛选区域 -->
    <el-card class="filter-card" shadow="never">
      <el-form :inline="true" :model="searchForm" class="search-form" @keyup.enter="handleSearch">
        <el-form-item class="search-buttons">
          <el-button type="primary" @click="handleSearch">
            <el-icon><Refresh /></el-icon>刷新列表
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 文件列表 -->
    <el-card shadow="never" class="list-card" v-loading="loading" element-loading-text="加载中...">
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <span class="header-title">资料列表</span>
            <el-tag type="info" class="header-count" size="small">
              共 {{ total }} 条
            </el-tag>
          </div>
          <el-space>
            <el-button type="primary" :icon="Upload" @click="showUploadDialog">
              上传资料
            </el-button>
            <el-tooltip :content="selectedMaterials.length ? '删除选中的文件' : '请先选择要删除的文件'" placement="top">
              <el-button
                type="danger"
                :icon="Delete"
                @click="handleBatchDelete"
                :disabled="!selectedMaterials.length"
              >
                批量删除 {{ selectedMaterials.length ? `(${selectedMaterials.length})` : '' }}
              </el-button>
            </el-tooltip>
          </el-space>
        </div>
      </template>

      <el-table
        ref="materialTableRef"
        v-loading="tableLoading"
        :data="materialList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        row-key="id"
        border
        stripe
        highlight-current-row
        :empty-text="loading ? '' : '暂无数据'"
      >
        <el-table-column type="selection" width="55" fixed="left" />
        <el-table-column label="文件图片" width="100" align="center" fixed="left">
          <template #default="{ row }">
            <el-image
              v-if="row.imageUrl"
              :src="row.imageUrl"
              :preview-src-list="row.imageUrl ? [row.imageUrl] : []"
              fit="cover"
              style="width: 50px; height: 50px; border-radius: 4px; cursor: pointer"
              :initial-index="0"
            >
              <template #error>
                <div class="image-placeholder">
                  <el-icon :size="24"><Document /></el-icon>
                </div>
              </template>
            </el-image>
            <div v-else class="image-placeholder">
              <el-icon :size="24"><Document /></el-icon>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="文件名称" min-width="200" show-overflow-tooltip fixed="left">
          <template #default="{ row }">
            <div class="file-name-cell">
              <el-icon class="file-type-icon">
                <component :is="getFileTypeIcon(row.url || '')" />
              </el-icon>
              <el-tooltip
                :content="row.name"
                placement="top"
                :show-after="1000"
                :hide-after="3000"
              >
                <span class="file-name">{{ row.name }}</span>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="文件描述" min-width="300" show-overflow-tooltip>
          <template #default="{ row }">
            <el-tooltip
              :content="row.description"
              placement="top"
              :show-after="1000"
              :hide-after="3000"
            >
              <span>{{ row.description }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="文件类型" width="100" align="center">
          <template #default="{ row }">
            <el-tag
              :type="row.type === FileType.MEETING ? 'success' : 'info'"
              size="small"
              effect="dark"
            >
              {{ row.type === FileType.MEETING ? '会议相关' : '一般文件' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="fileSize" label="文件大小" width="100" align="right">
          <template #default="{ row }">
            <el-tooltip :content="`${row.fileSize} 字节`" placement="top">
              <span>{{ formatFileSize(row.fileSize) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <el-space>
              <el-tooltip content="下载文件" placement="top">
                <el-button
                  type="primary"
                  link
                  :icon="Download"
                  @click="handleDownload(row)"
                  :loading="row.downloading"
                  :disabled="!row.url"
                >
                  下载
                </el-button>
              </el-tooltip>
              <el-tooltip content="编辑信息" placement="top">
                <el-button type="warning" link :icon="Edit" @click="handleEdit(row)">
                  编辑
                </el-button>
              </el-tooltip>
              <el-tooltip content="删除文件" placement="top">
                <el-button
                  type="danger"
                  link
                  :icon="Delete"
                  @click="handleDelete(row)"
                  :loading="row.deleting"
                >
                  删除
                </el-button>
              </el-tooltip>
            </el-space>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="500px"
      destroy-on-close
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="100px"
        status-icon
      >
        <el-form-item label="文件名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入文件名称" />
        </el-form-item>
        <el-form-item label="文件描述" prop="description">
          <el-input
            v-model="formData.description"
            type="textarea"
            rows="3"
            placeholder="请输入文件描述"
            show-word-limit
            maxlength="200"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false" :disabled="loading">取消</el-button>
          <el-button type="primary" @click="handleUpdate" :loading="loading">
            {{ loading ? '保存中...' : '确定' }}
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加新建资料对话框 -->
    <el-dialog
      v-model="uploadDialogVisible"
      title="上传资料"
      width="600px"
      destroy-on-close
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        ref="uploadFormRef"
        :model="uploadForm"
        :rules="uploadRules"
        label-width="100px"
        status-icon
      >
        <el-form-item label="资料名称" prop="name">
          <el-input
            v-model="uploadForm.name"
            placeholder="请输入资料名称"
            show-word-limit
            maxlength="50"
          />
        </el-form-item>
        
        <el-form-item label="资料类型" prop="type">
          <el-select v-model="uploadForm.type" placeholder="请选择资料类型" style="width: 100%">
            <el-option label="会议相关" :value="FileType.MEETING" />
            <el-option label="一般文件" :value="FileType.GENERAL" />
          </el-select>
        </el-form-item>

        <el-form-item label="资料描述" prop="description">
          <el-input
            v-model="uploadForm.description"
            type="textarea"
            rows="3"
            placeholder="请输入资料描述"
            show-word-limit
            maxlength="200"
          />
        </el-form-item>

        <el-form-item label="资料图片" prop="image">
          <el-upload
            class="material-upload"
            :auto-upload="false"
            :show-file-list="true"
            :limit="1"
            accept="image/*"
            :on-change="handleImageChange"
            :on-remove="handleImageRemove"
            list-type="picture-card"
          >
            <template #default>
              <el-icon><Plus /></el-icon>
              <div class="el-upload__text">点击上传</div>
            </template>
            <template #file="{ file }">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <el-icon><ZoomIn /></el-icon>
                </span>
                <span class="el-upload-list__item-delete" @click="() => handleImageRemove()">
                  <el-icon><Delete /></el-icon>
                </span>
              </span>
            </template>
            <template #tip>
              <div class="el-upload__tip">
                只能上传 JPG/PNG/GIF 格式图片，且不超过 5MB
              </div>
            </template>
          </el-upload>
        </el-form-item>

        <el-form-item label="资料文件" prop="file">
          <el-upload
            class="material-upload"
            :auto-upload="false"
            :show-file-list="true"
            :limit="1"
            :on-change="handleFileChange"
            :on-remove="handleFileRemove"
            drag
          >
            <template #default>
              <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </template>
            <template #tip>
              <div class="el-upload__tip">
                支持各种格式文件，且不超过 50MB
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="uploadDialogVisible = false" :disabled="uploading">取消</el-button>
          <el-button type="primary" @click="handleUpload" :loading="uploading">
            {{ uploading ? '上传中...' : '确定' }}
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 图片预览对话框 -->
    <el-dialog v-model="previewVisible" append-to-body width="800px" align-center>
      <img w-full :src="previewUrl" alt="Preview Image" style="max-width: 100%; height: auto;" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules, UploadFile } from 'element-plus'
import { 
  getMaterialList, 
  deleteMaterial, 
  updateMaterial, 
  uploadMaterialFile,
  uploadMaterialImage,
  addMaterial,
  batchDeleteMaterials,
  getMaterialDetail
} from '@/api/material'
import type { Material, MaterialQuery } from '@/api/material'
import {
  Plus,
  Download,
  Document,
  Picture,
  Delete,
  Edit,
  Refresh,
  Upload,
  ZoomIn,
  UploadFilled,
  VideoPlay,
  Headset,
  Folder
} from '@element-plus/icons-vue'

interface ExtendedUploadFile extends UploadFile {
  type?: string
}

// 定义文件类型枚举
enum FileType {
  ALL = 'ALL',
  MEETING = 'MEETING',
  GENERAL = 'GENERAL'
}

// 搜索表单
const searchForm = reactive({
  page: 1,
  size: 10
})

// 编辑表单
const formData = ref<Material>({
  id: '',
  name: '',
  description: '',
  size: 0,
  url: '',
  imageUrl: ''
})

// 表单校验规则
const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入文件名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入文件描述', trigger: 'blur' },
    { min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur' }
  ],
  type: [{ required: true, message: '请选择文件类型', trigger: 'change' }]
})

// 上传对话框
const uploadDialogVisible = ref(false)
const uploadFormRef = ref<FormInstance>()
const uploading = ref(false)

const uploadForm = reactive({
  name: '',
  description: '',
  type: FileType.GENERAL,
  image: null as File | null,
  file: null as File | null
})

// 上传表单校验规则
const uploadRules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入资料名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入资料描述', trigger: 'blur' },
    { min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur' }
  ],
  type: [{ required: true, message: '请选择资料类型', trigger: 'change' }],
  image: [{ required: true, message: '请上传资料图片', trigger: 'change' }],
  file: [{ required: true, message: '请上传资料文件', trigger: 'change' }]
})

const loading = ref(false)
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formRef = ref<FormInstance>()
const materialList = ref<Material[]>([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const selectedMaterials = ref<Material[]>([])
const previewVisible = ref(false)
const previewUrl = ref('')

// 表格加载状态
const tableLoading = ref(false)

// 表格选择处理
const handleSelectionChange = (selection: Material[]) => {
  selectedMaterials.value = selection
}

// 批量删除
const handleBatchDelete = () => {
  if (!selectedMaterials.value.length) {
    ElMessage.warning('请选择要删除的文件')
    return
  }

  ElMessageBox.confirm(
    `确认删除选中的 ${selectedMaterials.value.length} 个文件吗？此操作不可恢复！`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      loading.value = true
      const ids = selectedMaterials.value.map(material => material.id)
      
      if (ids.length === 0) {
        ElMessage.error('没有有效的ID可以删除');
        return;
      }
      
      console.log('批量删除文件，ID列表:', ids);
      await batchDeleteMaterials(ids);
      ElMessage.success('批量删除成功');
      selectedMaterials.value = [];
      fetchMaterialList();
    } catch (error) {
      console.error('批量删除失败:', error);
      ElMessage.error('批量删除失败');
    } finally {
      loading.value = false
    }
  })
}

// 获取文件类型图标
const getFileTypeIcon = (url: string) => {
  const extension = url.split('.').pop()?.toLowerCase()
  switch (extension) {
    case 'jpg':
    case 'jpeg':
    case 'png':
    case 'gif':
      return Picture
    case 'mp4':
    case 'avi':
    case 'mov':
      return VideoPlay
    case 'mp3':
    case 'wav':
      return Headset
    case 'pdf':
      return Document
    case 'doc':
    case 'docx':
      return Document
    case 'xls':
    case 'xlsx':
      return Document
    case 'zip':
    case 'rar':
    case '7z':
      return Folder
    default:
      return Document
  }
}

// 格式化文件大小
const formatFileSize = (size: number) => {
  if (size < 1024) return size + ' B'
  if (size < 1024 * 1024) return (size / 1024).toFixed(2) + ' KB'
  if (size < 1024 * 1024 * 1024) return (size / (1024 * 1024)).toFixed(2) + ' MB'
  return (size / (1024 * 1024 * 1024)).toFixed(2) + ' GB'
}

// 获取文件列表
const fetchMaterialList = async () => {
  loading.value = true
  tableLoading.value = true
  try {
    const params: MaterialQuery = {
      page: currentPage.value,
      size: pageSize.value
    }
    console.log('发送请求参数:', params)
    const response = await getMaterialList(params)
    console.log('获取到的响应:', response)
    
    // 适配后端返回的数据结构
    if (response && response.current_data) {
      // 检查第一个记录的ID格式
      if (response.current_data.length > 0) {
        console.log('第一条记录ID:', response.current_data[0].id)
        console.log('ID类型:', typeof response.current_data[0].id)
      }
      
      // 填充一些在表格中需要显示但后端未提供的字段
      materialList.value = response.current_data.map(item => ({
        ...item,
        // 添加默认值或从现有字段派生值
        fileSize: item.size || 0,
        type: FileType.GENERAL, // 假设默认为一般文件
        // 确保必需的属性存在
        url: item.url || '',
        imageUrl: item.imageUrl || '',
      }));
      
      total.value = response.total_record || 0
      console.log('处理后的材料列表:', materialList.value)
      
      // 再次检查第一个记录的ID格式
      if (materialList.value.length > 0) {
        console.log('处理后第一条记录ID:', materialList.value[0].id)
        console.log('处理后ID类型:', typeof materialList.value[0].id)
      }
    } else {
      console.error('响应数据结构不符合预期:', response)
      materialList.value = []
      total.value = 0
      ElMessage.warning('获取数据格式不正确')
    }
  } catch (error) {
    console.error('获取文件列表失败:', error)
    ElMessage.error('获取文件列表失败')
    materialList.value = []
    total.value = 0
  } finally {
    loading.value = false
    tableLoading.value = false
  }
}

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1
  fetchMaterialList()
}

// 分页处理
const handleSizeChange = (val: number) => {
  pageSize.value = val
  fetchMaterialList()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  fetchMaterialList()
}

// 下载文件
const handleDownload = async (row: Material) => {
  if (!row.url) {
    ElMessage.warning('该文件无下载链接')
    return
  }
  
  try {
    loading.value = true
    // 直接使用文件URL进行下载，而不是获取详情
    const link = document.createElement('a')
    link.href = row.url
    link.target = '_blank'
    link.download = row.name || '未命名文件'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    
    ElMessage.success('文件下载已开始')
  } catch (error) {
    console.error('下载失败:', error)
    ElMessage.error('文件下载失败')
  } finally {
    loading.value = false
  }
}

// 编辑文件
const handleEdit = (row: Material) => {
  dialogTitle.value = '编辑文件'
  // 输出ID信息用于调试
  console.log('编辑前的ID:', row.id)
  console.log('ID类型:', typeof row.id)
  
  formData.value = { 
    ...row,
    id: row.id
  }
  
  console.log('编辑后的ID:', formData.value.id)
  console.log('编辑后ID类型:', typeof formData.value.id)
  
  dialogVisible.value = true
}

// 删除文件
const handleDelete = (row: Material) => {
  // 输出ID信息用于调试
  console.log('准备删除文件，ID:', row.id)
  console.log('ID类型:', typeof row.id)
  
  if (!row.id) {
    ElMessage.error('无效的ID');
    return;
  }
  
  ElMessageBox.confirm('确认删除该文件？此操作不可恢复！', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      console.log('删除文件，使用ID:', row.id)
      await deleteMaterial(row.id)
      ElMessage.success('删除成功')
      fetchMaterialList()
    } catch (error) {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  })
}

// 更新文件
const handleUpdate = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      try {
        // 输出ID信息用于调试
        console.log('准备更新文件，ID:', formData.value.id)
        console.log('ID类型:', typeof formData.value.id)
        
        if (!formData.value.id) {
          ElMessage.error('无效的ID');
          return;
        }
        
        console.log('使用ID更新:', formData.value.id)
        await updateMaterial(formData.value.id, formData.value)
        ElMessage.success('更新成功')
        dialogVisible.value = false
        fetchMaterialList()
      } catch (error) {
        console.error('更新失败:', error)
        ElMessage.error('更新失败')
      }
    }
  })
}

// 显示上传对话框
const showUploadDialog = () => {
  uploadDialogVisible.value = true
  uploadForm.name = ''
  uploadForm.description = ''
  uploadForm.type = FileType.GENERAL
  uploadForm.image = null
  uploadForm.file = null
}

// 图片上传处理
const handleImageChange = (file: ExtendedUploadFile) => {
  console.log('图片文件信息:', file)
  
  // 优化文件类型检查，同时检查MIME类型和文件扩展名
  const allowedMimeTypes = ['image/jpeg', 'image/png', 'image/gif']
  const fileName = file.name || ''
  const extension = fileName.split('.').pop()?.toLowerCase() || ''
  const allowedExtensions = ['jpg', 'jpeg', 'png', 'gif']
  
  // 只要满足一种检查方式就通过
  const isValidType = allowedMimeTypes.includes(file.type || '') || 
                      allowedExtensions.includes(extension)
                      
  if (!isValidType) {
    ElMessage.error('只能上传 JPG/PNG/GIF 格式的图片')
    return false
  }
  
  // 检查文件大小
  const maxSize = 5 * 1024 * 1024 // 5MB
  if (file.size && file.size > maxSize) {
    ElMessage.error('图片大小不能超过 5MB')
    return false
  }
  
  console.log('图片验证通过:', file.name, 'MIME类型:', file.type, '扩展名:', extension)
  uploadForm.image = file.raw || null
  
  // 手动触发表单验证
  if (uploadFormRef.value) {
    uploadFormRef.value.validateField('image')
  }
  
  return true
}

const handleImageRemove = () => {
  uploadForm.image = null
}

// 图片预览
const handlePictureCardPreview = (file: UploadFile) => {
  if (file && file.url) {
    previewUrl.value = file.url
    previewVisible.value = true
  }
}

// 文件上传处理
const handleFileChange = (file: UploadFile) => {
  console.log('文件信息:', file)
  
  // 检查文件大小
  const maxSize = 50 * 1024 * 1024 // 50MB
  if (file.size && file.size > maxSize) {
    ElMessage.error('文件大小不能超过 50MB')
    return false
  }
  
  uploadForm.file = file.raw || null
  console.log('文件验证通过:', file.name)
  return true
}

const handleFileRemove = () => {
  uploadForm.file = null
}

// 提交上传
const handleUpload = async () => {
  if (!uploadFormRef.value) return
  
  try {
    // 首先验证表单基本信息
    await uploadFormRef.value.validate()
    
    // 检查图片和文件是否已选择
    if (!uploadForm.image) {
      ElMessage.error('请上传资料图片')
      return
    }
    
    if (!uploadForm.file) {
      ElMessage.error('请上传资料文件')
      return
    }

    uploading.value = true
    
    // 显示上传进度
    ElMessage.info('正在上传图片...')
    
    // 1. 先上传图片
    const imageResponse = await uploadMaterialImage(uploadForm.image)
    console.log('图片上传成功:', imageResponse)
    const imageUrl = imageResponse.data as string
    
    ElMessage.info('正在上传文件...')
    
    try {
      // 2. 再上传文件
      console.log('开始上传文件, 大小:', uploadForm.file.size, '类型:', uploadForm.file.type)
      const fileResponse = await uploadMaterialFile(uploadForm.file)
      console.log('文件上传成功:', fileResponse)
      const fileUrl = fileResponse.data as string
      
      ElMessage.info('正在保存资料信息...')
      
      // 3. 创建资料
      const materialData: Partial<Material> = {
        name: uploadForm.name,
        description: uploadForm.description,
        url: fileUrl,
        imageUrl: imageUrl,
        size: uploadForm.file.size || 0
      }
      
      console.log('准备添加资料:', materialData)
      
      // 4. 调用 API 保存资料信息
      await addMaterial(materialData)
      
      ElMessage.success('上传成功')
      uploadDialogVisible.value = false
      await fetchMaterialList()
    } catch (fileError) {
      console.error('文件上传失败:', fileError)
      ElMessage.error(`文件上传失败: ${fileError instanceof Error ? fileError.message : '未知错误'}`)
      // 继续抛出错误，让外层 catch 捕获
      throw fileError
    }
  } catch (error) {
    console.error('上传失败:', error)
    ElMessage.error(error instanceof Error ? error.message : '上传失败')
  } finally {
    uploading.value = false
  }
}

onMounted(() => {
  console.log('====== 开始获取资料列表 ======')
  fetchMaterialList()
})
</script>

<style lang="scss" scoped>
@import '@/styles/common.scss';

.material-management {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);

  .filter-card {
    margin-bottom: 20px;
    border-radius: 8px;

    :deep(.el-card__body) {
      padding: 15px 20px;
    }
  }

  .list-card {
    border-radius: 8px;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-left {
        display: flex;
        align-items: center;
        gap: 12px;

        .header-title {
          font-size: 16px;
          font-weight: 600;
          color: #303133;
        }

        .header-count {
          margin-left: 8px;
        }
      }
    }
  }

  .search-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    :deep(.el-form-item) {
      margin-bottom: 0;
      margin-right: 0;
    }
  }

  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

  .file-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;

    .file-type-icon {
      font-size: 20px;
      color: #909399;
    }

    .file-name {
      color: #409eff;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: #79bbff;
      }
    }
  }

  .image-placeholder {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f7fa;
    border-radius: 4px;
    color: #909399;
  }

  .material-logo {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .logo-placeholder {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f7fa;
    border-radius: 4px;
    color: #909399;
  }

  .material-upload {
    :deep(.el-upload-list) {
      max-height: 150px;
      overflow-y: auto;
    }

    :deep(.el-upload-dragger) {
      width: 100%;
      height: 180px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;

      .el-icon--upload {
        font-size: 48px;
        color: #409eff;
        margin-bottom: 0;
      }

      .el-upload__text {
        font-size: 14px;
        color: #606266;

        em {
          color: #409eff;
          font-style: normal;
        }
      }
    }

    :deep(.el-upload--picture-card) {
      --el-upload-picture-card-size: 120px;
      border-radius: 8px;
      transition: all 0.3s;

      &:hover {
        border-color: #409eff;
        color: #409eff;
      }
    }

    :deep(.el-upload-list__item) {
      border-radius: 8px;
    }
  }

  .status-tag {
    min-width: 80px;
    text-align: center;
  }

  :deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;

    .el-table__header {
      th {
        background-color: #f5f7fa;
        color: #606266;
        font-weight: 600;
      }
    }

    .el-table__row {
      transition: background-color 0.3s;

      &:hover {
        background-color: #f5f7fa;
      }
    }
  }

  :deep(.el-dialog) {
    border-radius: 8px;
    overflow: hidden;

    .el-dialog__header {
      margin: 0;
      padding: 20px;
      border-bottom: 1px solid #dcdfe6;
      background-color: #f5f7fa;

      .el-dialog__title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
      }
    }

    .el-dialog__body {
      padding: 20px;
    }

    .el-dialog__footer {
      padding: 20px;
      border-top: 1px solid #dcdfe6;
      background-color: #f5f7fa;
    }
  }
}
</style> 